<template>
	<view>
		<canvas canvas-id="myCanvas" style="width:690px;height:1040px; position:fixed;top:-1000px;"></canvas>
		<view style="display:flex;align-items: center;justify-content: center;">
			<image @click="saveShareImg(canvasToTempFilePath)" style="width:580upx; height:1040upx;"
				:src="canvasToTempFilePath" mode=""></image>
		</view>


	<view class="btn" @click="saveShareImg(canvasToTempFilePath)">保存小程序码到相册
				</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				touxiang: 'https://ourydcimage.shenghua6.cn/2021/01/30/2021013016590950146.jpg',
				erweima: 'https://webapp.test.shenghua6.cn/st/mini/static/img/chatRoomDetails/mini.jpg',
				ratio: 1,
				ctx: null, // 创建canvas对象
				canvasToTempFilePath: null, // 保存最终生成的导出的图片地址
				openStatus: true, // 声明一个全局变量判断是否授权保存到相册


			}
		},



		onLoad() {


			this.createCanvasImage();
		},
		onShow() {


			var _this = _this

			uni.getSystemInfo({
				success: function(res) {
					let clientHeight = res.windowHeight;
					// 获取可使用窗口高度
					let clientWidth = res.windowWidth;
					// 算出比例
					let ratio = 750 / clientWidth;
					// 算出高度(单位rpx)
					var height = clientHeight * ratio;
					// 设置高度
					console.log(res.windowHeight)

				},


			})

		},
		methods: {

			// 生成海报
			async createCanvasImage() {
				let self = this;
				// 点击生成海报数据埋点
				if (!self.ctx) {
					let codeUrl = this.erweima;
					let coverUrl = this.touxiang;
					let headUrl = this.touxiang;
					wx.showLoading({
						title: '生成中...'
					});
					let code = new Promise(function(resolve) {
						wx.getImageInfo({
							src: codeUrl,
							success: function(res) {
								resolve(res.path);
							},
							fail: function(err) {
								console.log(err);
								wx.showToast({
									title: '网络错误请重试',
									icon: 'loading'
								});
							}
						});
					});

					let cover = new Promise(function(resolve) {
						wx.getImageInfo({
							src: coverUrl,
							success: function(res) {
								resolve(res.path);
							},
							fail: function(err) {
								console.log(err);
								wx.showToast({
									title: '网络错误请重试',
									icon: 'loading'
								});
							}
						});
					});

					// 头像
					let headImg = new Promise(function(resolve) {
						wx.getImageInfo({
							src: headUrl,
							success: function(res) {
								resolve(res.path);
							},
							fail: function(err) {
								console.log(err);
								wx.showToast({
									title: '网络错误请重试',
									icon: 'loading'
								});
							}
						});
					});

					Promise.all([headImg, code, cover]).then(function(result) {
						const ctx = wx.createCanvasContext('myCanvas');
						console.log(ctx, self.ratio, 'ctx');

						let canvasWidthPx = 690 * self.ratio,
							canvasHeightPx = 1040 * self.ratio,

							// avatarurl_width = 110, //绘制的头像宽度
							// avatarurl_heigth = 110, //绘制的头像高度
							// avatarurl_x = 95, //绘制的头像在画布上的位置
							// avatarurl_y = 35, //绘制的头像在画布上的位置

							// 底部二维码
							codeurl_width = 140, //绘制的二维码宽度
							codeurl_heigth = 120, //绘制的二维码高度

							codeurl_x = 470, //绘制的二维码在画布上的位置
							codeurl_y = 750, //绘制的二维码在画布上的位置

							coverurl_width = 610, //绘制的封面宽度
							coverurl_heigth = 450, //绘制的封面高度

							coverurl_x = 40, //绘制的封面在画布上的位置
							coverurl_y = 200; //绘制的封面在画布上的位置

						// ctx.drawImage('../../static/img/tab/qhs.jpg', 0, 0, 690, 1040); // 背景图片需要本地
						// 白底
						// 底色背景
						ctx.setFillStyle('#FFFFFF')
						// 距左 距上 宽 高
						ctx.fillRect(20, 170, 650, 660)

						// ctx.save(); // 先保存状态 已便于画完圆再用
						// ctx.beginPath(); //开始绘制
						//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
						// ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y,
						// 	avatarurl_width / 2, 0, Math.PI * 2, false);
						// ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
						// ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width,
						// 	avatarurl_heigth); // 推进去图片
						// ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
						// ctx.font = 'normal bold 45px sans-serif';
						// ctx.setFillStyle('#ffffff'); // 文字颜色
						// ctx.fillText('微信昵称', 240, 85); // 绘制文字
						// ctx.setFillStyle('#ffffff'); // 文字颜色
						// ctx.setFontSize(30); // 文字字号
						// ctx.fillText('推荐您来捷通驾校', 240, 130); // 绘制文字

						ctx.font = 'normal bold 20px sans-serif';
						ctx.setFillStyle('#222222');
						ctx.fillText('上捷通驾校', 40, 700);

						ctx.font = 'normal normal 18px sans-serif';
						ctx.setFillStyle('#000'); // 文字颜色
						ctx.fillText('ID:' + '上海市松江区小昆山镇平原街398号5号楼', 40, 730); // 绘制文字



						ctx.font = 'normal normal 15px sans-serif';
						ctx.setFillStyle('#666666'); // 文字颜色
						ctx.fillText('哩咔APP搜索,或长按保存二维码', 40, 755); // 绘制文字

						// 白底
						// ctx.setFillStyle('#000')
						// ctx.fillRect(40, 670, 125, 40)

						// ctx.font = 'normal normal 24px sans-serif';
						// ctx.setFillStyle('#1F8DFE'); // 文字颜色
						// ctx.fillText('自有考场', 55, 700); // 绘制文字

						// 白底
						// ctx.setFillStyle('#FDE5D2')
						// ctx.fillRect(180, 670, 125, 40)

						// ctx.setFillStyle('#F37F26'); // 文字颜色
						// ctx.fillText('收费透明', 195, 700); // 绘制文字

						// 白底
						// ctx.setFillStyle('#D2F1EF')
						// ctx.fillRect(320, 670, 125, 40)

						// ctx.setFillStyle('#2EBBB4'); // 文字颜色
						// ctx.fillText('有接送', 335, 700); // 绘制文字


						// ctx.beginPath();
						// // 设置线宽
						// ctx.lineWidth = 1;
						// // 设置间距（参数为无限数组，虚线的样式会随数组循环）
						// ctx.setLineDash([10, 10]);
						// // 移动画笔至坐标 x20 y20 的位置
						// ctx.moveTo(30, 760);
						// // 绘制到坐标 x20 y100 的位置
						// ctx.lineTo(660, 760);
						// // 填充颜色
						// ctx.strokeStyle = "#aaaaaa";
						// // 开始填充
						// ctx.stroke();
						// ctx.closePath();

						// ctx.font = 'normal normal 36px sans-serif';
						// ctx.setFillStyle('#E65449'); // 文字颜色
						// ctx.fillText('长按识别', 300, 870); // 绘制孩子百分比
						// ctx.font = 'normal normal 36px sans-serif';
						// ctx.setFillStyle('#222222'); // 文字颜色
						// ctx.fillText('小程序码', 444, 870); // 绘制孩子百分比
						// ctx.font = 'normal normal 36px sans-serif';
						// ctx.setFillStyle('#222222'); // 文字颜色
						// ctx.fillText('查看驾校详细信息', 300, 920); // 绘制孩子百分比
						// ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width,
						// 	coverurl_heigth); // 二维码绘制
						ctx.drawImage(result[2], coverurl_x, coverurl_y, coverurl_width,
							coverurl_heigth);
						ctx.drawImage(result[1], 500, 670, 140, 140); // 绘制头像
						ctx.draw(false, function() {
							// canvas画布转成图片并返回图片地址
							wx.canvasToTempFilePath({
								canvasId: 'myCanvas',
								success: function(res) {
									self.canvasToTempFilePath = res.tempFilePath;
									self.showShareImg = true;
									// console.log(res.tempFilePath, 'canvasToTempFilePath');
									wx.showToast({
										title: '绘制成功'
									});
								},
								fail: function() {
									wx.showToast({
										title: '绘制失败'
									});
								},
								complete: function() {
									wx.hideLoading();
									wx.hideToast();
								}
							});
						});
					});
				}
			},

			// 保存到系统相册
			saveShareImg: function(canvasToTempFilePath) {
				let self = this;
				// 数据埋点点击保存海报
				self.saveId = '保存学情海报';
				// 获取用户是否开启用户授权相册
				if (!self.openStatus) {
					wx.openSetting({
						success: result => {
							if (result) {
								if (result.authSetting['scope.writePhotosAlbum'] === true) {
									self.openStatus = true;
									wx.saveImageToPhotosAlbum({
										filePath: canvasToTempFilePath,
										success() {
											self.showShareImg = false;
											wx.showToast({
												title: '图片保存成功，快去分享到朋友圈吧~',
												icon: 'none',
												duration: 2000
											});
										},
										fail() {
											wx.showToast({
												title: '保存失败',
												icon: 'none'
											});
										}
									});
								}
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					wx.getSetting({
						success(res) {
							// 如果没有则获取授权
							if (!res.authSetting['scope.writePhotosAlbum']) {
								wx.authorize({
									scope: 'scope.writePhotosAlbum',
									success() {
										self.openStatus = true;
										wx.saveImageToPhotosAlbum({
											filePath: canvasToTempFilePath,
											success() {
												self.showShareImg = false;
												wx.showToast({
													title: '图片保存成功，快去分享到朋友圈吧~',
													icon: 'none',
													duration: 2000
												});
											},
											fail() {
												wx.showToast({
													title: '保存失败',
													icon: 'none'
												});
											}
										});
									},
									fail() {
										// 如果用户拒绝过或没有授权，则再次打开授权窗口
										self.openStatus = false;
										console.log('请设置允许访问相册');
										wx.showToast({
											title: '请设置允许访问相册',
											icon: 'none'
										});
									}
								});
							} else {
								// 有则直接保存
								self.openStatus = true;
								wx.saveImageToPhotosAlbum({
									filePath: canvasToTempFilePath,
									success() {
										self.showShareImg = false;
										wx.showToast({
											title: '图片保存成功，快去分享到朋友圈吧~',
											icon: 'none',
											duration: 2000
										});
									},
									fail() {
										wx.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
						},
						fail(err) {
							console.log(err);
						}
					});
				}
			}
		},






		mounted() {


		}
	}
</script>


<style scoped>
	uni-page-body {
		background: #007AFF;
	}
	
	
			.btn {
				width: 514upx;
				height: 77upx;
				line-height: 77upx;
				text-align: center;
				background-image: linear-gradient(-44deg, #7078FF 0%, #B1A4FF 100%, #B1A4FF 100%);
				/* box-shadow: 0 8upx 9upx 0 rgba(255, 255, 255, 0.72), 0 14upx 9upx 0 #DEF2FF, inset 0 0 9upx 4upx rgba(250, 230, 255, 0.16); */
				border-radius: 14upx;
				margin: 0 auto;
				font-size: 32upx;
				color: #FFFFFF;
				margin-top: -160upx;
			}
	
	
</style>
